<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .logo{
            float: left;
            width: 33%;
            height: 60px;
            line-height: 60px;

        }
        .amenu{
            color: white;
            text-decoration: none;
            height: 50px;
            line-height:50px ;
        }
    </style>
</head>
<body>
<!--
           1 创建一个最外层的div
           2 第一部分 logo  嵌套三个div
           3 第二部分 导航栏部分 防止五个超链接
           4 第三部分 轮播图
           5 第四部分
           6 第5部分 直接放一个图片
           7 第六部分 抄第四部分
           8 第七部分 防止一张图片
           9  第八部分 放一推超链接
-->
        <div>
            <!--             第一部分 logo  嵌套三个div-->
            <div >
                <div class="logo">
                    <img src="./img/logo.jpg" alt="">
                </div>
                <div class="logo">
                    <img src="./img/zhengpin.jpg" alt="">
                </div>
                <div class="logo">
                    <a href="#">登陆</a>
                    <a href="#">注册</a>
                    <a href="#">黑马</a>
                </div>
            </div>
            <div style="clear: both"></div>
            <!--             第二部分 导航栏部分 防止五个超链接-->

            <div style="background-color: black; height: 60px;text-align: left">
                <a href="#" class="amenu">手机</a>
                <a href="#" class="amenu">手机1</a>
                <a href="#" class="amenu">手机2</a>
                <a href="#" class="amenu">手机3</a>
            </div>
<!--            第三部分 轮播图-->
            <div >
                <img src="./img/轮播图.jpg" alt="" width="100%">
            </div>
<!--            第四部分-->
            <div>
                <div>
                    <h>最新商品<img src="./e69f69232b0772f7a171c1ab0dd219f0_title2.jpg" alt=""></h>
<!--                    左侧广告图-->
                </div>
                <!--                    左侧广告图-->
                <div style="width: 15%;height: 480px;border: 2px;solid-color: red;float: left">
                    <img src="./img/zuobiandatu.jpg" alt="" >
                </div>
<!--                右侧商品-->
                <div style="width: 84%;height: 480px;border: 2px;solid-color: black; float: left">
                    <div style="height: 240px;width: 50%;float: left">
                        <img src="./img/zhonjian.jpg" alt="" height="100%" width="100%">
                    </div>
                    <div style="float: left;height: 240px;width: 17%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 17%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>
<!--       第5部分 直接放一个图片     -->
            <div>
                <img src="./img/7.jpg" alt="" width="100%">
            </div>
<!--            第六部分 抄第四部分-->
            <div>
                <div>
                    <h>最新商品<img src="./e69f69232b0772f7a171c1ab0dd219f0_title2.jpg" alt=""></h>
                    <!--                    左侧广告图-->
                </div>
                <!--                    左侧广告图-->
                <div style="width: 15%;height: 480px;border: 2px;solid-color: red;float: left">
                    <img src="./img/zuobiandatu.jpg" alt="" >
                </div>
                <!--                右侧商品-->
                <div style="width: 84%;height: 480px;border: 2px;solid-color: black; float: left">
                    <div style="height: 240px;width: 50%;float: left">
                        <img src="./img/zhonjian.jpg" alt="" height="100%" width="100%">
                    </div>
                    <div style="float: left;height: 240px;width: 17%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 17%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                    <div style="float: left;height: 240px;width: 16%;text-align: center">
                        <img src="./img/xiyiji.jpg" alt="" >
                        <p>高压锅</p>
                        <p style="color: red">$998</p>
                    </div>
                </div>
            </div>
<!--            第七部分 防止一张图片-->
            <div>
                <img src="./img/7.jpg" alt="" width="100%">
            </div>
<!--            第八部分 放一推超链接-->
            <div style="text-align: center">
                <a href="#">招贤纳什</a>
                <a href="#">招贤纳什</a>
                <a href="#">招贤纳什</a>
                <a href="#">招贤纳什</a>
            </div>
        </div>
</body>
</html>